<!-- 创建海报 -->
<template>
  <div class="create-poster">
    <div class="poster-img">
      <img src="" alt="" />
    </div>
    <div class="pop">
      <vue-qr  :logoSrc="logo" :text="textdesc" :size="200"></vue-qr>
    </div>
    
    <div class="poster-canvas">
      <canvas ref="posterCanvas"></canvas>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import vueQr from 'vue-qr'
import logo from '@/assets/logo.png'
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {vueQr},
  props: ["posterMessage"],
  data() {
    //这里存放数据
    return {
      logo:logo,
      textdesc:'小馨'
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    createCavans() {
      let c = this.$refs.posterCanvas;
      //创建画布
      var ctx = c.getContext("2d");
      //window.devicePixelRatio
      //window.screen.availHeight
      //window.screen.availWidth
      c.width = window.devicePixelRatio * window.screen.availWidth;
      c.height = window.devicePixelRatio * window.screen.availHeight;
      var imgData = ctx.createImageData(c.width, c.height);
      for (var i = 0; i < imgData.data.length; i += 4) {
        imgData.data[i + 0] = 255;
        imgData.data[i + 1] = 255;
        imgData.data[i + 2] = 255;
        imgData.data[i + 3] = 255;
      }
      ctx.putImageData(imgData, 0, 0);
      //插入图片
      let goods_img = this.posterMessage.goods_img;
      let img = new Image();
      img.src = goods_img;
      img.onload = function () {
        ctx.drawImage(img, 10, 10, 355, 200);
      };
      //绘制名字
      let goods_name = this.posterMessage.goods_name;
      ctx.font = "20px Arical";
      ctx.fillStyle = "#79cbca";
      ctx.fillText(goods_name.slice(0, 15), 20, 250);
      //绘制价格
      let goods_price = this.posterMessage.goods_price;
      ctx.font = "30px Arical";
      ctx.fillStyle = "#ff534c";
      ctx.fillText('￥'+goods_price, 20, 300);
    },
  },
  beforeCreate() {}, //生命周期 - 创建之前
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  beforeMount() {}, //生命周期 - 挂载之前
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.createCavans();
  },
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang="less" scoped>
.create-poster {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  width: 100%;
  height: 100%;
  background-color: rgba(#000, 0.7);
  .pop{
    position: fixed;
    left: 25%;
    top: 40rem;
    z-index: 999;
  }
}
</style>